<template>
  <!-- 登录页面 -->
  <div>
    <el-card shadow="always" class="mid">
      <div slot="header" class="clearfix">
        <span>登录账号</span>
      </div>
      <!-- 登录表单 添加登录表单验证-->
      <el-form :model="loginFormList" :rules="loginFormRule" ref="loginFormRef">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginFormList.username" placeholder="请输入账号">
            <el-button slot="prepend" icon="el-icon-user"></el-button>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginFormList.password"
            placeholder="请输入密码"
            :type="passwordType"
          >
            <el-button slot="prepend" icon="el-icon-lock"></el-button>
            <i
              class="el-icon-view el-input__icon"
              :style="fontstyle"
              slot="suffix"
              @click="ShowPassword"
            ></i>
          </el-input>
        </el-form-item>
        <!-- 验证码 引用验证码组件 验证码验证-->
        <el-form-item prop="verifycode">
          <el-input
            style="width: 160px"
            placeholder="验证码不区分大小写"
            v-model="loginFormList.verifycode"
            class="left1"
          >
          </el-input>
          <div class="identifybox left2">
            <div @click="refreshCode">
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
            <!-- 刷新验证码 -->
            <el-button @click="refreshCode" type="text" class="textbtn"
              >看不清，换一张</el-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 400px" @click="loginButton"
            >登录</el-button
          >
        </el-form-item>
        <span
          >没有账号？
          <router-link style="color: red" to="/register">注册</router-link>
        </span>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import SIdentify from "./SIdentify";
export default {
  name: "MyLogin",
  components: {
    SIdentify,
  },
  data() {
    // 验证码验证函数
    const validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifyCode) {
        // console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
    };
    return {
      loginFormList: {
        username: "",
        password: "",
        verifycode: "",
      },
      loginFormRule: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 20,
            message: "长度在 8 到 20 个字符",
            trigger: "blur",
          },
        ],
        verifycode: [
          { required: true, trigger: "blur", validator: validateVerifycode },
        ],
      },
      //密码是否可见开关
      fontstyle: "",
      passwordType: "password",
      // 验证码的数据库
      identifyCodes: "1234567890",
      // 验证码数组传值
      identifyCode: "",
    };
  },
  methods: {
    // 通过改变input的type使密码可见
    ShowPassword() {
      this.fontstyle === ""
        ? (this.fontstyle = "color: red")
        : (this.fontstyle = ""); // 改变密码可见按钮颜色
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      // console.log(this.identifyCode)
    },
    //登录按钮
    loginButton() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        const { data:res } =await this.$http.post("login", this.loginFormList);
        if (res.code !== 200) return this.$message.error(res.msg);
        window.sessionStorage.setItem("token", res.token);
        this.$message.success("登录成功");
        window.sessionStorage.setItem("userName", this.loginFormList.username);
        window.sessionStorage.setItem("ID",res.data);
        this.$router.push("/home/chat");
      })
    },
  },
  created() {
    //初始化验证码
    this.refreshCode();
    this.makeCode(this.identifyCodes, 4);
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>

<style scoped>
.mid {
  margin: auto;
  margin-top: 100px;
  width: 440px;
}
.identifybox {
  display: flex;
  justify-content: space-between;
  float: right;
  margin-top: 7px;
}
</style>